// @flow
import React from 'react'
import styles from './Gauge.css'
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/gauge'
import 'echarts/lib/component/title'
import 'echarts/lib/component/tooltip'
import R from 'ramda'

type Props = {
  xData: Array<Object>,
  chartData: Array<Object>,
  title: String,
  yTitle: String,
  name: string,
  unit: string,
  color: string,
  min: number,
  max: number,
  value: number,
  valueColor: string
}
class Line extends React.Component {
  props: Props
  timeOut: number
  intervar: number
  myChart: Object
  option: Object
  componentWillUnmount () {
    clearTimeout(this.timeOut)
    clearInterval(this.intervar)
  }

  componentDidMount () {
    this.draw(this.props)
  }

  componentWillReceiveProps (nextProps: Props) {
    if (!R.equals(nextProps, this.props)) {
      this.draw(nextProps)

      const main = this.refs.main
      if (main && this.myChart) {
        this.option.series[0].data[0].value = nextProps.value
        // this.option.series[0].min = nextProps.min
        // this.option.series[0].max = nextProps.max
        this.myChart.setOption(this.option)
      }
    }
  }
  draw (props: Props) {
    let { name, unit, color, valueColor, min, max, value } = props
    if (value > 10000 || value < -10000) {
      value = value.toExponential(2)
    }
    // console.log('value----------------');
    // console.log(value);
    this.myChart = echarts.init(this.refs.main)
    this.option = {
      tooltip : {
        formatter:'{a}：{c} {b}'
      },
      series : [
        {
          name: name,
          type: 'gauge',
          z: 0,
          min: min,
          max: max,
          splitNumber: 5,
          radius: '90%',
          startAngle: 180,
          endAngle: 0,
          axisLine: {            // 坐标轴线
            lineStyle: {       // 属性lineStyle控制线条样式
              width: 10,
              // color: [[0.5, '#6ba23e'], [0.9, '#dce102'], [1, '#f4252d']]
              // color: [[0.09, '#2ECC71'], [0.82, '#5D9CEC'], [1, '#D8334A']]
              // color: [[0.09, '#666'], [0.82, '#666'], [1, '#DA4453']]
              color: [[0.2, color], [0.8, color], [1, color]]
            }
          },
          // axisLabel: {            // 坐标轴小标记
          //   textStyle: {
          //     color: '#000'
          //   }
          // },
          axisTick: {
            length: 12,        // 属性length控制线长
            lineStyle: {       // 属性lineStyle控制线条样式
              color: color
            }
          },
          splitLine: {           // 分隔线
            length: 16,         // 属性length控制线长
            lineStyle: {
              width:1,
              color: color
            }
          },
          title : {
            show: false,
            offsetCenter: [0, '15px'],
            textStyle: {
              fontSize: 14,
              fontStyle: 'italic'
            }
          },
          pointer: {
            width: 4
          },
          itemStyle: {
            normal: {
              borderWidth: 1,
              borderType: 'solid'
            }
          },
          dial: {
            backgroundColor : '#BF263C'
          },
          detail : {
            width: 100,
            height: 32,
            // backgroundColor: color,
            borderWidth: 1,
            borderColor: '#fff',
            offsetCenter: [0, '50%'],
            textStyle: {
              fontSize: 14,
              color: valueColor
              // fontWeight: 'bold'
            },
            formatter: (value) => {
              return value + unit
            }
          },
          data:[{ value: value, name: unit }]
        }
      ]
    }
    this.myChart.setOption(this.option)
    const component = this
    this.timeOut = setTimeout(() => {
      component.myChart.resize()
    }, 5)
  }

  render () {
    return (
      <div ref='main' className={styles['main']} style={{
        position: 'absolute', top: '0', left: '0', right: '0', bottom: '0'
      }} />
    )
  }
}
export default Line
